
<template>
    <transition name="overlay">
        <div class="overlay">
            <slot></slot>
        </div>
    </transition>
</template>
<script>
export default {
    name: 'Overlay'
}
</script>
<style lang="stylus">
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index:99;
}
.overlay {
    /*
    animation name duration timing-function delay iteration-count direction fill-mode
    */
    animation-name:mymodal-show;
    animation-duration: .3s;
    animation-timing-function:ease-out;
    animation-fill-mode:forwards;
}

.overlay-leave-active {
    animation-name:mymodal-hide;
}

@keyframes mymodal-show {
    0% {
        background:rgba(0,0,0,0);
    }
    100% {
        background:rgba(0,0,0,.2);
    }
}
@keyframes mymodal-hide {
    0% {
        background:rgba(0,0,0,.2);
    }
    100% {
        background:rgba(0,0,0,0);
    }
}
</style>